<template>
  <div class="nocommit-container">
      <div class="header">
      <div>
        <div class="left">
          <i></i>
        </div>
      </div>
      <!-- <h4>大件会</h4> -->
      <div class="logo">
        订单详情
      </div>
    </div>
    <div class="confirm">
      <i></i>
      <span>交易完成，待评价</span>
    </div>
    <div class="address">
      <i class="fl"></i>
      <div class="addr">
        <div>
          钟煌
          <span>13812348888</span>
        </div>
        <p>湖北省武汉市武昌区静安路六号尚文科技大厦5.5创意产业园A座24楼A湖北省武汉市武昌区静安路六号尚文科技大厦5.5创意产业园A座24楼A</p>
      </div>
    </div>
    <div class="tiaowen"></div>
    <div class="unPayed">
      <div class="unPayed">
        <div class="header connect">
          <span class="fl">DJ 大件会</span>
          <div class="fr">
            <span>
              <img src="../../../assets/images/index/kefu_ic2x.png" alt="">
            </span>
            联系客服
          </div>
        </div>
        <div class="body">
          <div class="pro clearfix">
            <div class="fl">
              <img src="../../../assets/images/myOrder/shangpinru.png" alt="">
            </div>
            <div class="fr">
              <ul>
                <li>2017年10月28日『武汉业主采购团』建材专场</li>
                <li>冠珠瓷砖</li>
              </ul>
            </div>
          </div>
          <div class="header hasPayed">
            <div class="clearfix">
              <span class="fl">商品订金：</span>
              <span class="fr">¥
                <i>300</i>
              </span>
            </div>
            <div class="clearfix">
              <span class="fl">商品尾款：</span>
              <span class="fr">¥
                <i>300</i>
              </span>
            </div>
            <div class="line"></div>
          </div>
          <div class="header hasPayed total">
            总计
            <i>300</i>
            <div class="line"></div>
          </div>
        </div>
      </div>

    </div>
    <div class="listInfo">
      <div class="clearfix">
        <span>订单编号：</span>
        <span>23234387548437</span>
      </div>
      <div class="clearfix">
        <span>订单时间：</span>
        <span>2017-11-20 10:30:32</span>
      </div>
      <div class="clearfix">
        <span>支付尾款时间：</span>
        <span>2017-11-20 10:30:32</span>
      </div>
      <div class="clearfix">
        <span>收货时间：</span>
        <span>2017-11-20 10:30:32</span>
      </div>
    </div>
    <div class="foot">
        <router-link to="/vip/order/commitPage">
        <mt-button size="normal" type="danger" class="combtn">待评价</mt-button>
        </router-link>
    </div>
  </div>
</template>
<script>
</script>
<style scoped lang="less">
.header {
  color: #000;
  background-color: #fff;
  .logo {
    a {
      display: inline-block;
      width: 131/37.5rem;
      height: 42/37.5rem;
      margin-top: 18/37.5rem;
    }
  }
  .left {
    position: absolute;
    left: 32/37.5rem;
    top: 35/37.5rem;
    height: 32/37.5rem;
    line-height: 32/37.5rem;
    a {
      font-size: 32/40rem;
    }
    i {
      display: inline-block;
      width: 22/37.5rem;
      height: 30/37.5rem;
      background: url(../../../assets/images/index/gengduo@2x.png) no-repeat;
      background-size: contain;
      transform: rotate(180deg);
    }
  }
}

.confirm {
  height: 120/37.5rem;
  line-height: 120/37.5rem;
  background-color: #e8393d;
  text-align: left;
  padding: 0 32/37.5rem;
  i {
    display: inline-block;
    width: 30/37.5rem;
    height: 30/37.5rem;
    background: url(../../../assets/images/index/smilingFace2x.png) no-repeat;
    background-size: contain;
  }
  span {
    margin-left: 27/37.5rem;
    font-size: 32/37.5rem;
    color: #fff;
  }
}

.address {
  text-align: left;
  padding: 39/37.5rem 32/37.5rem 27/37.5rem 32/37.5rem;
  font-size: 30/37.5rem;
  color: #333;
  background-color: #fff;
  i {
    display: inline-block;
    width: 26/37.5rem;
    height: 30/37.5rem;
    background: url(../../../assets/images/index/adr@2x.png) no-repeat;
    background-size: contain;
    margin-top: 56/37.5rem;
  }
  .addr {
    margin-left: 30px;
    span {
      margin-left: 59/37.5rem;
    }
    p {
      margin-top: 23/37.5rem;
      font-size: 26/37.5rem;
      color: #555;
      line-height: 34/37.5rem;
    }
  }
}

.tiaowen {
  height: 8/37.5rem;
  background: url(../../../assets/images/index/tiaowen.png);
  background-size: contain;
}

.unPayed {
  background-color: #fff;
  margin-top: 24/37.5rem;
  .connect {
    span:last-child {
      display: inline-block;
      width: 30/37.5rem;
      height: 28/37.5rem;
    }
  }
  .header {
    padding: 0 31/37.5rem;
    box-sizing: border-box;
    border-bottom: 2px solid #eee;
    height: 80/37.5rem;
    line-height: 80/37.5rem;
    text-align: left;
    font-size: 26/37.5rem;
    color: #555;
    .fl {
      font-size: 24/37.5rem;
    }
    .fr {
      font-size: 26/37.5rem;
      color: #555;
    }
  }
  .body {
    padding-top: 18/37.5rem;
    padding: 0 31/37.5rem;
    text-align: right;
    .pro {
      .fl {
        width: 200/37.5rem;
        height: 200/37.5rem;
        margin-top: 13/37.5rem;
      }
      .fr {
        width: 451/37.5rem;
        text-align: left;
        li:nth-of-type(1) {
          font-size: 30/37.5rem;
          line-height: 56/37.5rem;
          color: #333;
        }
        li:nth-of-type(2) {
          font-size: 28/37.5rem;
          line-height: 56/37.5rem;
          color: #555;
        }
        li:nth-of-type(3) {
          font-size: 24/37.5rem;
          text-align: right;
          span {
            color: red;
            font-size: 26/37.5rem;
          }
        }
      }
    }
    .mint-button {
      width: 170/37.5rem;
      height: 68/37.5rem;
      font-size: 28/37.5rem;
      margin-top: 57/37.5rem;
      margin-bottom: 32/37.5rem;
    }
    .hasPayed {
      padding: 21/37.5rem 0 !important;
      text-align: left;
      font-size: 24/37.5rem;
      padding: 0;
      color: #888;
      border-bottom: 0;
      margin-top: 24/37.5rem;
      width: 100%;
      position: relative;
      line-height: 50/37.5rem;
      height: auto;
      .line {
        width: 104%;
        height: 20px/37.5rem;
        background-color: #eee;
        position: absolute;
        top: 0;
        right: -32/37.5rem;
      }
    }
    .total {
      text-align: right;
    }
  }
}

.listInfo {
  line-height: 50/37.5rem;
  color: #888;
  font-size: 26/37.5rem;
  padding: 0 31/37.5rem;
  background-color: #fff;
  margin-top: 26/37.5rem;
  div {
    span:first-child {
      float: left;
    }
    span:last-child {
      float: right;
    }
  }
}
.foot {
  padding: 10/37.5rem 0;
  padding-right: 33/37.5rem;
  margin-top: 26/37.5rem;
  background-color: #fff;
  text-align: right;
  .mint-button {
    width: 170/37.5rem;
    height: 68/37.5rem;
    font-size: 28/37.5rem;
  }
}
.combtn {
  background-color: #d8b78d;
}
</style>
